import { Button, Typography } from "antd";

const NumRow = ({ list }) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-around",
        margin: "10px 0",
      }}
    >
      {list.map((item) => (
        <div
          key={JSON.stringify(item)}
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            background: "url(num-bg.png) center center no-repeat",
            backgroundSize: "100% 100%",
            padding: "10px 0",
            width: `${92 / list.length}%`,
          }}
        >
          <div
            style={{
              marginBottom: "10px",
              fontSize: 13,
              display: "flex",
              alignItems: "center",
            }}
          >
            <img
              src={item.icon}
              alt="图片"
              style={{ width: 14, height: 14, marginRight: 7 }}
            />
            {item.label}
          </div>
          <div
            style={{
              textAlign: "center",
              lineHeight: "25px",
              background: "linear-gradient(90deg, #00B4FF 0%, #CAE8FE 100%)",
              fontWeight: "bold",
              textTransform: "none",
              backgroundClip: "text",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              fontSize: '1.1vw',
            }}
          >
            {item.num}
          </div>
        </div>
      ))}
    </div>
  );
};

export default NumRow;
